<template>
  <div id="public_account">
    <div style="margin-bottom: 30px; height: 40%">
      <div class="billing_title">
        <h1>对公账户</h1>
        <el-button icon="iconfont icon-bangding" size="mini" class="exportBtn add" @click="addAccount">
          绑定银行账号
        </el-button>
      </div>
      <div class="public_table">
        <el-table
          :data="tableData"
          class="table"
          height="100%"
          border
          tooltip-effect="light"
          ref="jdjgTable"
          :header-cell-style="{
            padding: '0px',
            background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
          }"
          :row-class-name="tabRowClassName"
          header-row-class-name="mapTable_th"
        >
          <el-table-column label="户名" align="center" prop="accountName" width="140"> </el-table-column>
          <el-table-column label="开户银行" align="center" prop="bankName" width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="银行账号" align="center" prop="bankAccount" show-overflow-tooltip> </el-table-column>
          <el-table-column label="联系电话" align="center" prop="phone" width="160"> </el-table-column>
          <el-table-column label="状态" align="center" prop="state" width="100">
            <template slot-scope="scope">
              {{ scope.row.state == 1 ? '绑定中' : '已绑定' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="140">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="xg czBtn"
                size="small"
                @click="handleClick(scope.row)"
                v-if="scope.row.state == 1"
              >
                填写绑定资料
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div style="height: calc(100% - 40% - 30px)">
      <h1 style="margin-bottom: 20px">户名下的虚拟账户（{{ virtualAccount || 0 }}）</h1>
      <div class="virtual_table">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            v-for="(item, index) in virtualData"
            :key="index"
            :label="virtualLabel(item)"
            :name="item.id + ''"
          >
            <keep-alive>
              <virtual-table :id="item.id" v-if="activeName == item.id"></virtual-table>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog
      width="736px"
      :center="true"
      :title="title"
      v-if="visiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="visiable"
    >
      <bind-bank-account-modify @close="close" :state="state" :id="id"></bind-bank-account-modify>
    </el-dialog>
  </div>
</template>

<script>
import BindBankAccountModify from './BindBankAccountModify.vue'
import VirtualTable from './VirtualTable.vue'
export default {
  components: { BindBankAccountModify, VirtualTable },
  data() {
    return {
      activeName: null,
      virtualAccount: null,
      state: null,
      title: '',
      tableData: [],
      visiable: false,
      id: null
    }
  },
  computed: {
    virtualData() {
      let arr = []
      this.tableData.forEach(item => {
        if (item.state == 2) {
          arr.push(item)
        }
      })
      return arr
    }
  },
  mounted() {
    this.getBindData()
  },
  methods: {
    virtualLabel(val) {
      let num = 0
      if (val.virtualBankAccountVoList && val.virtualBankAccountVoList.length) {
        num = val.virtualBankAccountVoList.length
      }
      return val.accountName + '下的虚拟账户(' + num + ')'
    },
    handleClick(scope) {
      this.title = '绑定银行账号'
      this.visiable = true
      this.state = scope.state
      this.id = scope.id
    },
    closeDialog(done) {
      this.state = null
      done()
    },
    // 绑定银行账号弹出框
    addAccount() {
      this.visiable = true
      this.title = '绑定银行账号'
    },
    close(val) {
      this.state = null
      this.visiable = false
      if (val) {
        this.getBindData()
      }
    },
    getBindData() {
      this.$https({
        method: 'post',
        url: '/bankAccount/listPublicBankAccount'
      })
        .then(res => {
          if (res.code == 0) {
            this.tableData = res.data || []

            let arr = []
            this.tableData.forEach(item => {
              this.virtualAccount += item.virtualBankAccountVoList.length
              if (item.state == 2) {
                arr.push(item)
              }
            })
            this.activeName = arr[0].id + ''
            arr = []
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
#public_account {
  height: calc(100vh - 188px);
  .billing_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #2d2d2d;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
  }
  .public_table {
    height: calc(100% - 92px);
    border: 1px solid #ebebeb;
    padding: 20px;
  }
  .virtual_table {
    height: calc(100% - 41px);
    /deep/ .el-tabs {
      height: 100%;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
    /deep/ .el-tabs__content {
      border: 1px solid #e4e7ed;
      border-top: none;
      height: calc(100% - 82px);
      padding: 20px;
    }
    /deep/ .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
